<dom-module id="ve-size">
    <template>
        <style>
            :host {
                display:flex;
                flex-direction:column;
                align-items:center
            }
            span.space {
                flex:none;
                width:6px
            }
        </style>
        <div class="layout horizontal center">
            <ve-checkbox id="check_w" value="{{value.isWidthPer}}" path="{{path}}.isWidthPer" disabled="{{!attrs.hasParent}}"></ve-checkbox>
            <span class="space"></span>
            <ve-unit-input id="w" class="flex-1" disabled="{{disabled}}" readonly="{{readonly}}" 
                                    path="{{path}}.width" input-value="{{value.width}}"
                                    step="{{attrs.step}}" precision="{{attrs.precision}}"
                                    min="{{attrs.min}}" max="{{attrs.max}}"
                                    hidden="{{value.isWidthPer}}" hint="W"></ve-unit-input>
            <ve-unit-input id="wper" class="flex-1" disabled="{{disabled}}" readonly="{{readonly}}" path="{{path}}.widthPer" input-value="{{value.widthPer}}" hidden="{{!value.isWidthPer}}" hint="W%" step="1" precision="1" max="1000" min="0"></ve-unit-input>
        </div>
        <div class="layout horizontal center">
            <ve-checkbox id="check_h" value="{{value.isHeightPer}}" path="{{path}}.isHeightPer" disabled="{{!attrs.hasParent}}"></ve-checkbox>
            <span class="space"></span>
            <ve-unit-input id="h" class="flex-1" disabled="{{disabled}}" readonly="{{readonly}}" 
                                    path="{{path}}.height" input-value="{{value.height}}"
                                    step="{{attrs.step}}" precision="{{attrs.precision}}"
                                    min="{{attrs.min}}" max="{{attrs.max}}"
                                    hidden="{{value.isHeightPer}}" hint="H"></ve-unit-input>
            <ve-unit-input id="hper" class="flex-1" disabled="{{disabled}}" readonly="{{readonly}}" path="{{path}}.heightPer" input-value="{{value.heightPer}}" hidden="{{!value.isHeightPer}}" hint="H%" step="1" precision="1" max="1000" min="0"></ve-unit-input>
        </div>
    </template>
    <script>(() => {
        'use strict';
        Polymer({
            properties: {
                value: {
                    type: Object,
                    value: function() {
                        return {
                            width: 0,
                            height: 0,
                            isWidthPer:false,
                            isHeightPer:false
                        }
                    },
                    notify: true
                },
                disabled: {
                    type: Boolean,
                    value: false,
                    reflectToAttribute: true
                },
                readonly: {
                    type: Boolean,
                    value: false,
                    reflectToAttribute: true
                }
            }
        });
    })();
    </script>
</dom-module>